<!--
 * @Descripttion: 楼栋配置
 * @version: 
 * @Author: wl
 * @Date: 2020-05-26 14:45:29
 * @LastEditors: wl
 * @LastEditTime: 2020-05-28 09:11:47
-->
<template>
  <div>
    <page :asideShow="false" :footShow="false" :headerShow="false">
      <div slot="toolbar" class="headerBuild"></div>
      <div slot="content">
        <p class="titleadd">密码修改</p>
        <el-steps
          :space="300"
          :active="active"
          finish-status="success"
          align-center
        >
          <el-step title="原始密码"></el-step>
          <el-step title="设置新密码"></el-step>
        </el-steps>
        <!-- 原密码 -->
        <el-form
          :model="oldForm"
          status-icon
          :rules="ruleold"
          ref="oldForm"
          label-width="100px"
          class="demo-ruleForm"
          v-if="oidpadd == true"
        >
          <el-form-item label="账号" prop="userName">
            <el-input v-model.number="oldForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="oldForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitOldForm('oldForm')"
              >提交</el-button
            >
            <el-button @click="resetOldForm('oldForm')">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 新密码 -->
        <el-form
          v-if="oidpadd == false"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="userName">
            <el-input disabled :value="ruleForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="新的密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer"></div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    // var checkName = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("账号不能为空"));
    //   }
    //   setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error("请输入数字值"));
    //     } else {
    //       if (value < 18) {
    //         callback(new Error("必须年满18岁"));
    //       } else {
    //         callback();
    //       }
    //     }
    //   }, 1000);
    // };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 显示
      oidpadd: true,
      // 原始密码
      oldForm: {
        userName: "",
        password: ""
      },
      active: 0,
      ruleForm: {
        id: "",
        password: "",
        checkPass: "",
        userName: ""
      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      ruleold: {
        password: [{ required: true, message: "账号不能空", trigger: "blur" }],
        userName: [{ required: true, message: "账号不能空", trigger: "blur" }]
      }
    };
  },
  mounted() {},

  methods: {
    // 旧密码
    submitOldForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let param = {
            type: 1,
            userName: this.oldForm.userName,
            password: this.$md5(this.oldForm.password)
          };
          let rs = await this.$api.user.sys_user_check(param);
          if (!rs || rs.code !== 0) {
            this.$message.error("验证失败，请填写正确账号密码！");
            return;
          }
          this.ruleForm.id = rs.data;
          this.ruleForm.userName = this.oldForm.userName;
          if (this.active++ > 1) this.active = 0;
          this.oidpadd = false;
        } else {
          return false;
        }
      });
    },
    resetOldForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 新密码
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.active++ > 1) this.active = 0;
          this.$alert("确认修改密码", "提示", {
            confirmButtonText: "确定",
            callback: async () => {
              let param = {
                type: 2,
                userName: this.ruleForm.userName,
                id: this.ruleForm.id,
                password: this.$md5(this.ruleForm.checkPass),
                checkPass: this.$md5(this.ruleForm.checkPass)
              };
              let rs = await this.$api.user.sys_user_check(param);
              if (rs.code === 0) {
                this.$message.success("修改成功！");
              }
              sessionStorage.removeItem("user");
              sessionStorage.clear();
              localStorage.clear();
              this.$router.push("/login");
              // this.active = 0;
              // this.oidpadd = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.titleadd {
  line-height: 50px;
  padding: 0 20px;
  border-left: 5px solid rgb(30, 175, 243);
  margin-bottom: 30px;
}

.demo-ruleForm {
  width: 50%;
  margin: 100px auto;
}
.el-form-item {
  margin-bottom: 30px;
}
.el-steps {
  margin: 30px auto;
  display: flex;
  justify-content: center;
}
</style>
